<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>动画效果的封装</title>
		<script src="vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="root">
			<fade :show = "show"><div>hello world</div>	</fade>
			<fade :show = "show" ref = "child"><h1>hello world</h1>	</fade>
			<button type="button" @click = "handleClick()">toggle</button>
			<input ref="input">
			<button @click = "learnRef" ref="seeBtn">查看ref</button>
		</div>
	</body>
	<script type="text/javascript">
		// 为了让所有动画的实现全部都封装到一个组件里,推荐用js动画,需要定制性的推荐用css动画
		Vue.component('fade', {
			props:['show'],
			template: `<transition ,
						@before-enter = "handleBeforeEnter($event)" 
						@enter = "handleEnter"
						@after-enter = "handleAfterEnter($event)"
						>
						<slot v-if = "show"></slot>
					   </transition>`,
			methods: {
				handleBeforeEnter: function(el){
					el.style.color = "red"
				},
				handleEnter: function (el, done) {
					setTimeout(()=>{
						el.style.color = "green";
						done();
					},2000)
				},
				handleAfterEnter: function (el) {
					setTimeout(()=>{
						el.style.color = "#000";
					},2000)
				}
			}
		})
		var vm = new Vue({
			el:"#root",
			data:{
				show: true,
			},
			methods:{
				handleClick: function () {
					this.show = !this.show;
				},
				learnRef: function () {
					console.dir(this.$refs.seeBtn);
					console.dir(this.$refs.child);
				}
			}
		})
	</script>
</html>
